Abhängigkeiten

• Shopify CLI: Ein Befehlszeilenschnittstellentool, das Sie bei der Entwicklung und Verwaltung Ihrer Shopify-Themes unterstützt.
• TailwindCSS: Ein Utility-First-CSS-Framework zum schnellen Erstellen benutzerdefinierter Designs.

Aufstellen

Wir verwenden Tailwind als eigenständiges CLI-Tool. Weitere Informationen finden Sie im offiziellen Leitfaden.

Hinweis: Wenn Sie dies auf einem Mac mit einem Intel-Prozessor einrichten, ersetzen Sie macos-arm64 durch macos-x64 in den folgenden Befehlen.

1. Laden Sie die neueste TailwindCSS-Binärdatei für macOS mit ARM64-Architektur herunter:

   curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64

2. Heruntergeladene Datei ausführbar machen:

   chmod x tailwindcss-macos-arm64

3. Verschieben Sie die ausführbare Datei auf einen passenderen Namen:

   mv tailwindcss-macos-arm64 tailwindcss

4. Führen Sie den TailwindCSS-Watcher aus:

   • Dieser Befehl überwacht Ihre TailwindCSS-Quelldatei (./assets/tailwind.css) auf Änderungen und kompiliert die Ausgabe in die gewünschte CSS-Datei (./assets/style.css):

     ./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --watch

Veröffentlichen

Wenn Sie bereit sind, Ihr CSS für die Produktion zu kompilieren, sollten Sie den folgenden Befehl verwenden, um Ihr CSS zu minimieren:

./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --minify

Dieser Befehl nimmt Ihre Eingabe-CSS-Datei (./assets/tailwind.css), verarbeitet sie mit TailwindCSS und gibt eine minimierte CSS-Datei (./assets/style.css) aus, die für die Produktion optimiert ist.

Abschluss

Mit diesen Schritten haben Sie TailwindCSS erfolgreich als eigenständiges CLI-Tool eingerichtet und in Ihr Projekt integriert. Mit diesem Setup können Sie Ihr CSS mithilfe des Utility-First-Ansatzes von Tailwind effizient entwickeln und verwalten. Durch die Ausführung des Watchers wird sichergestellt, dass Ihr CSS während der Entwicklung automatisch kompiliert wird, während der Minimierungsschritt Ihr CSS für die Produktion vorbereitet und es hinsichtlich der Leistung optimiert. Dieser optimierte Prozess trägt dazu bei, eine saubere und wartbare Codebasis aufrechtzuerhalten, sodass Sie sich ganz einfach auf die Erstellung und Anpassung Ihres Shopify-Themes konzentrieren können.